<template>
	<div class="zh-transaction-record">
		<nav-header></nav-header>

		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
                    <div class="open-width" style="width: 130px" v-if="user_level === 0">
						<el-select v-model="schoolId" filterable placeholder="请选择状态">
						    <el-option
						      v-for="item in schoolList"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</div>
                    <div class="open-width" style="width: 120px">
						<el-select v-model="fileParams.graduation_year" filterable placeholder="请选择">
						    <el-option
						      v-for="(item, index) in periodList"
						      :key="index"
						      :label="item.graduation_year"
						      :value="item.graduation_year">
						    </el-option>
						</el-select>
					</div>
                    <div class="open-width" style="width: 145px">
                        <el-cascader
                            placeholder="请选择班级"
                            :options="gradeList"
                            :props="claddDataProps"
                            @active-item-change="changeAddItem"
                            v-model="gradeId">
                        </el-cascader>
                    </div>
                    <div class="open-width">
                        <el-input v-model="keyword" placeholder="账号、姓名、学号" @keyup.enter.native="searchList"></el-input>
                    </div>
					<el-button type="primary" @click="searchList">搜索</el-button>
					<el-button type="primary" @click="resetList">重置</el-button>
				</div>

				<div class="zh-open-right fr">
					<el-button type="primary" @click="exportSelect('all')">导出所选</el-button>
                    <el-button type="danger" @click="deleteSelete">批量删除</el-button>
				</div>
			</div>

			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt">
				<el-table
				    :data="graduateList"
				    border
				    @selection-change="tableSelectionChange"
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      align="center"
                      fixed>
				    </el-table-column>
                    <el-table-column
                        prop=""
                        label="学校"
                        align="center"
                        v-if="user_multistage"
                        show-overflow-tooltip>
                    </el-table-column>
				    <el-table-column
				      prop="number"
				      label="账号"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="name"
				      label="真实姓名"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
                        prop=""
                        label="性别"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.sex === '1' ? '男' : '女'}}</span>
                        </template>
				    </el-table-column>
                    <el-table-column
				      prop="graduation_year"
				      label="届"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="study_code"
				      label="学号"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="teacher_name"
				      label="班主任"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="graduation_time"
				      label="毕业时间"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="parent_name"
				      label="家长"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="telphone"
				      label="联系方式"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="addr"
				      label="家庭住址"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop=""
				      label="状态"
				      align="center"
				      show-overflow-tooltip>
                      <template slot-scope="scope">
                            <span>已毕业</span>
                        </template>
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="操作"
				      align="center"
                      width="200"
				      show-overflow-tooltip>
				      	<template slot-scope="scope">
                            <el-button v-if="user_level === 0" @click="linkTo(scope.row.id, 1)" type="text">详情</el-button>
                            <el-button v-else @click="linkTo(scope.row.id, 2)" type="text">编辑</el-button>
                            <el-button @click="exportSelect(scope.row.id)" type="text">导出</el-button>
			      	        <el-button @click="deleteRow(scope.row)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>

				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="fileParams.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="fileParams.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  	export default {
	    data() {
		    return {
		    	loading:{
					status:false,
					txt:'获取数据...',
                },
                claddDataProps:{
	        		value:'id',
	        		label:'name',
                },
                gradeId: [], // 年级id
                stateId: null,
                schoolId: null, // 学校id
                keyword: '',
                schoolList: [], // 学校列表
                gradeList:[], // 年级列表
                stateList: [],
	        	selected:[],
	        	fileParams: {
	        		app_code: JSON.parse(sessionStorage.getItem('user_info_str')).app_code,
	        		org_id: null,
	        		keyword: '',
					page_index: 1,
                    page_size: 10,
                    study_status: 6,
                    graduation_year: null
				},
				total_number:0,
				graduateList:[],
                rowLen: 0,
                user_multistage: JSON.parse(sessionStorage.getItem('user_multistage')), // 判断当前是否为多级版本
                user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
                periodList: [], // 届
		    }
		},
		created(){
            this.getList();
            this.getAllGrade();
            this.getAllPeriod();
		},
		methods: {
            /**
             * 动态加载班级次级选项
             * @param {Array} val 选中值的 id
             */
            changeAddItem(val) {
                if (val.length > 1) return;

                let success = (res => {
                    this.gradeList.forEach(item => {
                        if (item.id === val[0]) {
                            item.children = [];
                            
                            res.data.forEach(tem => {
                                item.children.push({
                                    id: tem.id,
                                    name: tem.name
                                })
                            })
                        }
                    })
                });

                let params = {
                    grade_id: val[0],
                    get_end_class: 1
                }

                this.$ajax.get('api/org/get_class_by_grade_code', {params, func: {success: success}})
            },
            /**
             * 获取全部年级
             */
            getAllGrade() {
                let success = (res => {
                    this.gradeList = [];

                    if (!is_empty(res.data)) {
                        res.data.forEach(item => {
                            this.gradeList.push({
                                id: item.id,
                                name: item.name,
                                children: []
                            })
                        })

                        this.$forceUpdate();//强制渲染
                    }
                });
                
                this.$ajax.get('api/org/all_grade', {params: {}, func: {success: success}});
            },
            /**
             * 跳到变更记录页面
             * @param {Number} id 记录id
             * @param {Number} key 操作标识
             */
            linkTo(id, key) {
                if (key === 1) {
                    this.$router.push("/user/studystatus/file-edit/" + id + '?level=detail');
                } else if (key === 2) {
                    this.$router.push("/user/studystatus/file-edit/" + id);
                }
            },
            /**
             * 导出选中的记录
             * @param {Number} id 当前记录 id
             */
			exportSelect(id){
                if (id == 'all') {
                    if(this.graduateList.length === 0 || this.selected.length === 0){
                        this.$message.warning("导出的数据为空！")
                        return false;
                    }
                }

                let _id = [];
                if (id == 'all') {
                    this.selected.forEach(item => {
                        _id.push(item.id);
                    })
                } else {
                    _id.push(id);
                }

                let params = {
                    id: _id,
                    stydy_status: 6,
                    graduation_year: this.fileParams.graduation_year,
                    keyword: this.keyword ? this.keyword : null,
                    org_id: this.gradeId.length > 0 ? this.gradeId[this.gradeId.length - 1] : null,
                    app_code: this.fileParams.app_code ? this.fileParams.app_code: null,
                    get_end_class: 1
                }

                this.export_excel('api/studystatus/download_student_status', params, '毕业生档案');
            },
            /**
             * 根据筛选条件搜索
             */
			searchList(){
				this.fileParams.page_index = 1;
                this.fileParams.keyword = this.keyword;
                this.fileParams.org_id = this.gradeId[this.gradeId.length - 1];

				this.getList();
            },
            /**
             * 重置筛选条件
             */
			resetList() {
                this.keyword = '';
                this.gradeId = [];
                this.fileParams.org_id = null;
                this.fileParams.keyword = null;
                this.fileParams.page_index = 1;
                this.fileParams.page_size = 10;
                this.fileParams.graduation_year = null;
				this.getList();
            },
            /**
             * 获取变更记录
             */
			getList(){
                this.loading.status = true;
		    	
				let success = (res => {
					this.loading.status =  false
					this.graduateList = res.data.data;
					this.total_number = res.data.data_sum;
                });
                
  				this.$ajax.get('api/studystatus/get_studystatus_list', {params: this.fileParams, func: {success: success}});
            },
            /**
             * 获取全部毕业生届
             */
            getAllPeriod() {
                let success = (res => {
                    this.periodList = res.data;
                    this.periodList.unshift({
                        graduation_year: '全部'
                    })
                });
                
                this.$ajax.get('api/studystatus/get_graduation_year', {func: {success: success}})
            },
            /**
             * 选中记录
             * @param {Array} val 选中的id
             */
		    tableSelectionChange(val) {
                this.selected = val;
            },
            /**
             * 删除数据
             * @param {String || Array} param 删除数据的 id
             */
            deleteData(param) {
                this.loading.status = true;
		    	
				let success = (res => {
                    this.$message.success(res.msg);

                    if (this.graduateList.length - this.rowLen === 0) {
                        if (this.fileParams.page_index > 1) {
                            this.fileParams.page_index-- ;
                        } else {
                            this.fileParams.page_index = 1;
                        }
                    }

                    this.getList();
                });
                let fail = (res => {
                    this.loading.status = false;
                    this.$message.error(res.msg);
                })
                
  				this.$ajax.delete('api/studystatus/delete_history', {params: {id: param}, func: {success: success, fail: fail}});
            },
            /**
             * 删除记录
             * @param {Number} id 记录id
             */
            deleteRow(obj){
				let yes = (res => {
                    this.rowLen = 1;
                    this.deleteData(obj.id);
				})
                let cancel = (res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '是否删除该条记录？'});
            },
            /**
             * 批量删除
             */
	      	deleteSelete(){
				if(this.selected.length === 0) {
					this.$message.warning("请选择要删除的项");
					return false;
                }
                
				let yes = (res => {
                    this.rowLen = this.selected.length;
                    
                    let arr = [];
                    this.selected.forEach(item => {
                        arr.push(item.id);
                    })

                    this.deleteData(arr);
				})
                let cancel = (res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '确定要批量删除选中的项吗？'});
			},
		    handleSizeChange(val) {
		     	this.fileParams.page_index = 1;
		    	this.fileParams.page_size = val;
		    	this.getList();
		    },
		    handleCurrentChange(val) {
		    	this.fileParams.page_index = val;
		    	this.getList();
		    },
		},
  	}
</script>
<style lang="scss">
	.zh-transaction-record {
		
	}
</style>